<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs';
import axios from 'axios';
import { ElMessageBox } from 'element-plus'

const open = () => {
    ElMessageBox.prompt('请输入天数', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(({ value }) => {
        axios.post('http://10.59.30.132:8001/api/TRQ/UpdateSecureCount?x=' + value).then(res => {
            day.value = value;
        })
    }).catch(() => {

    })
}
let day = ref(0)
onMounted(() => {
    axios.post('http://10.59.30.132:8001/api/TRQ/QuerySecureCount').then((res) => {
        day.value = res.data
    })
})

let timer = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
setInterval(() => {
    timer.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
</script>

<template>
    <div id="header">
        <div class="time">{{ timer }}</div>
        <img src="@/assets/title.png" alt="">
        <div class="reckonByTime" @click="open">安全运行时长:{{ day }}天</div>
    </div>
</template>

<style scoped>
#header {
    height: .4323rem;
    width: 100%;
    background-image: url('@/assets/headBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

img {
    width: 2.6563rem;
    height: .3073rem;
}

.time,
.reckonByTime {
    font-size: 0.1rem;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 0 .0521rem #fff;
}
</style>